<template>
  <div>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2293181_m7w7ylg717s.css"
    />
    <div class="ppt">
      <div class="pptcon">
        <p><i class="iconfont icon-Arrow-Left2"></i> <span>PPT</span
        ><b class="iconfont icon-iconfont_fangdajing"></b></p>
      </div>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in ppt" :key="i">
          <img
            :src="require(`../assets/${item.img}`)"
            alt=""
            style="width:100%;height:200px;"
          />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
   
    <div class="redd">
      <div class="cyan">
        <p>精选好课</p>
        <ul>
          <li v-for="(item, i) in pptcon" :key="i">
            <img
              :src="require(`../assets/${item.img}`)"
              alt=""
              style="width:160px;height:100px;"
            />
            <p>{{ item.title }}</p>
            <p class="money">￥{{ item.money }}</p>
          </li>
        </ul>
      </div>
     <p class="top"></p>
      <div class="botto">
        <b>免费好课</b>
        <ul>
          <li v-for="(item, i) in con" :key="i">
            <img
              :src="require(`../assets/${item.img}`)"
              alt=""
              style="width:160px;height:100px;"
            />
            <p>{{item.title}}</p>
          </li>
        </ul>
      </div>
        <p class="lll"></p>
        <div class="paixu">
            <ul>
                <li class="heihei" @click="aa">畅销</li>
                <li class="haha" @click="upchange">好评</li>
                <li @click="pp">最新</li>
            </ul>

            <div v-for="(item,i) in pptcon" :key="i" class="right">
                <div class="next">
               <h6>  <img
              :src="require(`../assets/${item.img}`)"
              alt=""
              style="width:160px;height:80px;"
            /></h6>
               <h5><p>{{item.title}}</p> <p style="color:red;">￥{{item.money}}</p></h5>
               </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { getppt, getpptcon, getcon } from "@/api";
export default {
  data() {
    return {
      ppt: [],
      pptcon: [],
      con: [],
    };
  },
  mounted() {
       let { id } = this.$route.query;
    getppt()
      .then((res) => {
        this.ppt = res.data;
      })
      .then(() => {
        var swiper = new Swiper(".swiper-container", {
          //   spaceBetween: 10,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          loop: true,
          outplay: true,
        });
      });

    getpptcon().then((res) => {
      this.pptcon = res.data;
    });
    getcon().then((res) => {
      this.con = res.data;
    });
  },
  methods: {
      upchange(){
          this.pptcon.sort((a,b)=>{
              return b.money - a.money
          })
      },
      pp(){
          this.pptcon.sort((a,b)=>{
              return b.title.length - a.title.length
          })
      },
      aa(){
          this.pptcon.sort((a,b)=>{
              return b.img.length - a.img.length
          })
      }
  },
};
</script>

<style>
.next{
    width: 100%;
    height: 90px;
    border-bottom: 1px solid rgb(190, 189, 189);
}
.right{
    margin-top: 10px;
}
.right h6{
    width: 50%;
    float: left;
}
.right h5{
    height: 100px;
    width: 50%;
    float: left;
}
.right h5>P{
    margin-top: 10px;
}
.lll{
    width: 100%;
    height: 10px;
    background: #f4f4f4;
}
.top{
    width: 100%;
    height: 10px;
    margin-top: 15px;
    background: #f5f5f5;
}
.paixu{
    width: 95%;
    margin: 0 auto;
}
.paixu ul{
    display: flex;
    list-style: none;
    width: 100%;
    justify-content: space-between;
    border: 1px solid #000;
}
.heihei{
   border-right: 1px solid #000;
}
.paixu li{
    width: 150px;
    text-align: center;
    /* background: #fff; */
}
.haha{
    border-right: 1px solid #000;
}
.botto ul{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}
.botto li{
    width: 160px;
    height: 150px;
    list-style: none;
    margin-left: 5px;
}
.botto p{
    margin-top: 8px;
    font-size: 14px;
}
.botto {
  width: 95%;
  margin: 0 auto;
  margin-top: 8px;
}
.money {
  color: red;
  margin-top: 5px;
}
.redd {
  width: 100%;
  overflow: hidden;
}
.cyan {
  width: 95%;
  margin: 0 auto;
  margin: 10px;
  /* display: flex; */
}
.cyan ul {
  display: flex;
  flex-wrap: wrap;
  /* margin-top: 10px; */
}
.cyan li {
  width: 160px;
  height: 150px;
  list-style: none;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 20px;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  left: 120px;
}
.ppt {
  width: 100%;
  height: 50px;
  background: #ffff;
}
.pptcon {
  width: 100%;
  height: 50px;
  background: #ffff;
  position: fixed;
  top: 0;
  left: 0;
  /* margin-top: 10px; */
  font-size: 25px;
  z-index: 2222;
}
.pptcon p{
     display: flex;
  justify-content: space-between;
    margin-top: 10px;
}
.pptcon i {
  font-size: 25px;
}
.pptcon b {
  font-size: 20px;
}
</style>
